<template>
	<div class="zh-private-record">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width" style="width: 316px">
                        <el-date-picker
                            v-model="pickerTime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator=" - "
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
					</div>
					<div class="open-width" style="width: 180px">
						<el-input v-model="keyword" placeholder="请输入用户名搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="danger" @click="deleteMuiltChat_confirm">批量删除</el-button>
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<el-table
				    :data="chatList"
				    @selection-change="tableSelectionChange"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      align="center"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="send_name"
				      label="发件人"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="receive_name"
				      label="收件人"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="内容"
				      align="center">
                      <template slot-scope="scope" v-if="isShowTooltip(scope.row.app_content)">
                            <el-tooltip placement="top">
                                <div slot="content"><span class="private-record-tooltip" v-html="showImg(scope.row.app_content)"></span></div>
                                <span v-html="showImg(scope.row.app_content)"></span>
                            </el-tooltip>
			      	    </template>
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="发送时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="chatParam.page_index"
						:page-sizes="[10, 20, 30, 40, 50, 100]"
						:page-size="chatParam.page_size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
				rowLen: 0,
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
				selected:[],
		    	chatList:[],
		    	chatParam:{
		    		keyword:'',
		    		update_read:0,
		    		page_index:1,
					page_size:10,
					start_time:'',
                    end_time:'',
					orderby:'time',
				},
				keyword: '',
                pickerTime: [], // 开始时间和结束时间
		    	total_number:0,
		        input: '',
		    }
		},
		created(){
            this.getList();
        },
        computed: {
            /**
             * 获取HTML标签的字符串的内容
             */
            isShowTooltip() {
                return (content) => {
                    let array = content.replace(/<.*?>|<\/.*?>|&nbsp;|[：*]/g, ',').split(',');

                    for (let i = 0; i < array.length; i++) {
                        if (array[i] == "" || array[i] == " " || array[i] == null || typeof (array[i]) == "undefined") {
                            array.splice(i, 1);
                            i = i - 1;
                        }
                    }

                    // 注：IE9(不包含IE9)以下的版本没有trim()方法
                    let str = array.filter((s) => s && s.trim()).join('');

                    if (is_empty(str)) {
                        return false
                    }

                    return true;
                }
            }
        },
		methods: {
            showImg(content) {
                let temp = content.split('<img src=/emoji/');
                let data = null;

                temp.forEach((item, index) => {
                    if (index === 0) {
                        data = item;
                    } else {
                        data = data + '<img src=../../../static/emoji/' + item;
                    }
                })

                let res = data.split('<img src="/static/_/raty/img//blank.gif"');
                let str = null;

                 res.forEach((item, index) => {
                    if (index === 0) {
                        str = item; 
                    } else {
                        str = str + '<img src="/static/_/raty/img//blank.gif"' + item;
                    }
                })

                return str;
            },
			searchFunc(){
				this.chatParam.page_index = 1;
				this.chatParam.keyword = this.keyword;
				this.chatParam.start_time = this.pickerTime.length > 0 ? this.pickerTime[0] : '';
				this.chatParam.end_time = this.pickerTime.length > 0 ? this.pickerTime[1] : '';
				this.getList();
			},
			reset() {
                this.keyword = '';
                this.pickerTime = [];
				this.chatParam = {
		    		keyword:'',
		    		update_read:0,
		    		page_index:1,
					page_size:10,
					start_time:'',
					end_time:'',
					orderby:'time',
		    	}
				this.getList();
			},
			getList(){
				this.loading.status = true;
				
            	let success = (data=>{
            		this.loading.status = false;
            		this.chatList = data.data.data;

            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false
            		this.$message.error(data.msg)
                })
                let params = Object.assign(this.chatParam, {
                    check_app_code: 1,
                    server_ip: this.BASE_URL.split('//')[1]
                })
                
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/user/user_chat',{params: params,func:{success:success,fail:fail}})
            },
			//选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
		    handleSizeChange(val) {
		    	this.chatParam.page_index = 1;
		    	this.chatParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	
		    	this.chatParam.page_index = val;
		    	this.getList();
		    },
		    deleteChat_confirm(obj){
				let yes = ( data => {
					this.changeChat(obj.id,0);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定删除该记录吗？'});

			},
	      	deleteMuiltChat_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的私信");
					return false;
				}
				let yes = ( data => {
					this.rowLen = this.selected.length;
					this.deleteMuiltChat();
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的私信吗？'});

			},
	      	deleteMuiltChat(){
				var ids = [];
				for (var i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
				}
				this.changeChat(ids,0);
			},
			
		    changeChat(id,status){
		    	let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.chatList.length - this.rowLen === 0) {
						if (this.chatParam.page_index > 1) {
							this.chatParam.page_index-- ;
						} else {
							this.chatParam.page_index = 1;
						}
					}

					this.getList();
				});
				
		    	this.$ajax.put('api/user/change_user_chat',{id:id,status:status},{func:{success:success}})
		    },
		},
  	}
</script>
<style lang="scss">
.el-tooltip__popper.is-dark {
    .private-record-tooltip {
        a {
            color: #fff;
            text-decoration: underline;
        }

        p {
            margin: 0;
        }
    }
}
	.zh-private-record {
		.open-width {
			.el-date-editor {
				width: 100%;
				vertical-align: middle;
			}
		}

        .el-table__body-wrapper,
        .el-table__fixed-body-wrapper {
            tbody tr td {
                img {
                    max-width: 30  px;
                    max-height: 30px;
                }

                .el-tooltip, p {
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                    width: 100%;
                }
            }
        }

        .el-table__header tr,
        .el-table__header th {
            padding: 0;
            height: 60px;
        }
        .el-table__body tr,
        .el-table__body td {
            padding: 0;
            height: 60px;
        }
	}
	.el-tooltip__popper {
		max-width: 600px;
    	white-space: normal;
    	word-break: break-all;
	}
	
</style>